import {useEventListener} from '@vueuse/core'

/*
 * 显示页面遮罩
 */
export const showShade = (className = 'shade', closeCallBack?: () => void): void => {
	const containerEl = document.querySelector('.layout-container') as HTMLElement
	const shadeDiv = document.createElement('div')
	shadeDiv.setAttribute('class', 'cus-layout-shade ' + className)
	containerEl.appendChild(shadeDiv)
	useEventListener(shadeDiv, 'click', () => closeShade(closeCallBack))
}

/*
 * 隐藏页面遮罩
 */
export const closeShade = (closeCallBack?: () => void): void => {
	const shadeEl = document.querySelector('.cus-layout-shade') as HTMLElement
	shadeEl && shadeEl.remove()
	closeCallBack && closeCallBack()
}
